<template>
  <div class="social-index">
    <div v-if="isSocialDashboardRoute">
      <!-- 推荐活动轮播图 -->
      <el-card class="activity-carousel-card">
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in recommendedActivities" :key="item.id">
            <div class="carousel-content">
              <img :src="item.image" alt="活动图片" class="carousel-image" />
              <div class="overlay">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
                <span class="date">{{ item.date }}</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="carousel-header">
          <h2>推荐活动</h2>
        </div>
      </el-card>

      <!-- 子功能入口（可选，如果需要在这里直接展示一些子模块的概览） -->
      <el-row :gutter="20" class="feature-cards">
        <el-col :span="8">
          <el-card shadow="hover" @click="goToRoute('/credit/social/recycle')">
            <div class="card-icon"><el-icon><Delete /></el-icon></div>
            <h3>资源回收</h3>
            <p>参与环保，让资源循环利用</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" @click="goToRoute('/credit/social/water')">
            <div class="card-icon"><el-icon><Pouring /></el-icon></div>
            <h3>护水行动</h3>
            <p>节约用水，保护水资源</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" @click="goToRoute('/credit/social/welfare')">
            <div class="card-icon"><el-icon><Present /></el-icon></div>
            <h3>公益服务</h3>
            <p>奉献爱心，帮助需要的人</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <router-view v-else />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Delete, Pouring, Present } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// Computed property to check if current route is the social dashboard
const isSocialDashboardRoute = computed(() => {
  return route.path === '/credit/social' || route.path === '/credit/social/' || route.path === '/credit/social/homepage'
})

// 模拟推荐活动数据
const recommendedActivities = ref([
  {
    id: 1,
    title: '“爱暖童心，共筑未来”儿童关爱公益活动',
    description: '在这个充满爱与希望的世界里，有一群孩子，他们或许因为家庭的贫困、父母的缺失，而面临诸多困境，渴望着温暖与关怀。为了给这些孩子送去一份爱与力量，我们诚挚地发起“爱暖童心，共筑未来”儿童关爱公益活动，期待您的参与，一起为孩子们点亮希望的灯塔。',
    image: 'https://picsum.photos/id/1018/800/300',
    date: '2025.7.15'
  },
  {
    id: 2,
    title: '地球一小时，熄灯行动',
    description: '响应环保，节约能源，为地球减负。',
    image: 'https://picsum.photos/id/1015/800/300',
    date: '2025.3.30'
  },
  {
    id: 3,
    title: '旧物改造，创意生活',
    description: '将废旧物品变废为宝，用创意点亮生活。',
    image: 'https://picsum.photos/id/1016/800/300',
    date: '2025.5.10'
  },
  {
    id: 4,
    title: '社区义诊，健康同行',
    description: '为社区居民提供免费医疗咨询和义诊服务。',
    image: 'https://picsum.photos/id/1025/800/300',
    date: '2025.4.20'
  }
])

const goToRoute = (path) => {
  router.push(path)
}
</script>

<style scoped>
.social-index {
  padding: 20px;
  background-color: #f0f2f5;
}

.activity-carousel-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.carousel-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  padding: 20px;
  color: #fff;
}

.overlay h3 {
  margin-top: 0;
  margin-bottom: 5px;
}

.overlay p {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay .date {
  font-size: 12px;
  opacity: 0.8;
}

.feature-cards .el-card {
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature-cards .el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 10px;
}

.feature-cards h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 5px;
}

.feature-cards p {
  color: #666;
  font-size: 14px;
}
</style> 